<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery/jquery.1.10.2.min.js"></script>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    .checkbox-ex {
        background-image: url(img/check2.png);
        background-size: cover;
        border-radius: 20px;
        padding: 8px 45px;
        color: #fff;
        font-size: 15px;
        font-weight: 400;
    }

    .checkbox-ex-1 {
        background-image: url(img/check1.png);
    }

    .checkbox-ex-2 {
        background-image: url(img/check2.png);
    }

    .checkbox-ex input[type='checkbox'] {
        display: none;
    }
    </style>
</head>

<body>
    <div class="container-fluid">
        <form id="test">
            <div class="checkbox">
                <label class="checkbox-ex"><input type="checkbox" value="test1" name="test1">测试项目</label>
                <label class="checkbox-ex"><input type="checkbox" value="test2" name="test2">测试项目</label>
                <label class="checkbox-ex"><input type="checkbox" value="test3" name="test3">测试项目</label>
            </div>
            <button type="submit" id="tes11">123</button>
        </form>
    </div>
    <script>
    $("#tes11").click(function(event) {
        alert($("#test").serialize());
    });
    $(".checkbox-ex").click(function(event) {
        if ($(this).find('input').is(':checked')) {
            // 取消
            $(this).removeClass('checkbox-ex-2');
            $(this).addClass('checkbox-ex-1')
        } else {
            // 选中
            $(this).removeClass('checkbox-ex-1');
            $(this).addClass('checkbox-ex-2')
        };
    });
    </script>
</body>

</html>